<template>
  <div class="personal-settings with-cover">
    <div class="head">
      <img src="~/assets/images/personal-settings.png" alt="" />个人设置
    </div>
    <div class="content">
      <div class="tab-head">
        <div
          class="tab"
          :class="activeIndex === 0 && 'tab-active'"
          @click="checkTab(0)"
        >
          基本信息
        </div>
        <div
          class="tab"
          :class="activeIndex === 1 && 'tab-active'"
          @click="checkTab(1)"
        >
          实名认证
        </div>
      </div>
      <!-- 基本信息 -->
      <div v-show="activeIndex === 0" class="input-area basic-info">
        <Form
          class="form-basic-info"
          :model="info"
          ref="basicInfo"
          :rules="basicInfoRules"
          label-position="right"
          label-width="120px"
        >
          <Row>
            <Col>
              <form-item label="用户名：" prop="username">
                <div>{{ info.phone }}</div>
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col>
              <form-item style="width: 120px" label="头像：" prop="avatar">
                <div class="avatarPic mbt20" v-if="info.avatar">
                  <img :src="info.avatar" class="objectCover" />
                </div>
                <MUploadSingle @getPic="getAvatar" />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col :span="12">
              <form-item
                label="昵称："
                prop="nickname"
                :rules="[
                  { required: true, message: '请输入您的昵称', trigger: 'blur' }
                ]"
              >
                <Input
                  v-model="info.nickname"
                  type="text"
                  placeholder="请输入您的昵称"
                />
              </form-item>
            </Col>
            <Col :span="12">
              <form-item
                label="真实姓名："
                prop="real_name"
                :rules="[
                  {
                    required: true,
                    message: '请输入您的真实姓名',
                    trigger: 'blur'
                  }
                ]"
              >
                <Input
                  v-model="info.real_name"
                  type="text"
                  placeholder="请输入您的真实姓名"
                />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col :span="12">
              <form-item label="称呼：" prop="gender">
                <radio-group v-model="info.sex">
                  <Radio :label="0">先生</Radio>
                  <Radio :label="1">女士</Radio>
                </radio-group>
              </form-item>
            </Col>
            <Col :span="12">
              <form-item label="出生年月：" prop="birthday">
                <date-picker
                  style="width: 100%"
                  v-model="info.birthday"
                  type="date"
                />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col :span="12">
              <form-item label="就职公司：" prop="company">
                <Input
                  v-model="info.company"
                  type="text"
                  placeholder="请输入就职公司"
                />
              </form-item>
            </Col>
            <Col :span="12">
              <form-item label="职位：" prop="position_str">
                <Input
                  v-model="info.position_str"
                  type="text"
                  placeholder="请输入职位"
                />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col :span="24">
              <form-item label="公司地址：" prop="province">
                <radio-group v-model="info.country_type">
                  <Radio :label="0">中国大陆及港澳台</Radio>
                  <Radio :label="1">海外地区</Radio>
                </radio-group>
                <br />
                <Row :gutter="20">
                  <v-distpicker
                    class="addressChoose"
                    @province="onChangeProvince"
                    @city="onChangeCity"
                    @area="onChangeArea"
                    :province="info.province"
                    :city="info.city"
                    :area="info.area"
                  ></v-distpicker>
                </Row>
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col>
              <form-item label="详细地址：" prop="addres">
                <Input
                  v-model="info.addres"
                  type="text"
                  placeholder="请输入详细地址"
                />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col :span="12">
              <form-item
                label="电话："
                prop="tel"
                :rules="[
                  { required: true, message: '请输入电话', trigger: 'blur' }
                ]"
              >
                <Input v-model="info.tel" placeholder="请输入电话" />
              </form-item>
            </Col>
            <Col :span="12">
              <form-item label="手机号：" prop="phone">
                <Input
                  v-model="info.phone"
                  placeholder="请输入手机号"
                  maxlength="11"
                />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col :span="12">
              <form-item
                label="电子邮箱："
                prop="email"
                :rules="[
                  {
                    required: true,
                    message: '请输入电子邮箱',
                    type: 'email',
                    trigger: 'blur'
                  }
                ]"
              >
                <Input
                  v-model="info.email"
                  type="email"
                  placeholder="请输入电子邮箱"
                />
              </form-item>
            </Col>
            <Col :span="12">
              <form-item label="QQ：" prop="qq">
                <Input v-model="info.qq" />
              </form-item>
            </Col>
          </Row>

          <Row type="flex" justify="space-around">
            <Col :span="6">
              <div class="submit cursor" @click="infoSub('basicInfo')">
                {{ info.real_name ? "更改" : "提交" }}
              </div>
            </Col>
          </Row>
        </Form>
      </div>
      <!-- 实名认证 -->
      <div v-show="activeIndex === 1" class="input-area realname-verify">
        <div class="prompt">*您至少应选择名片或身份证之一完成实名认证。</div>
        实名认证：
        <radio-group v-model="info.real_type">
          <Radio :label="0">名片</Radio>
          <Radio :label="1">身份证</Radio>
        </radio-group>
        <div class="upload-area">
          <div class="upload-front">
            <MUploadSingle
              @getPic="getFront"
              :defaltPic="info.card_a"
              type="idcard"
              msg="正面"
            />
          </div>
          <div class="upload-reverse">
            <MUploadSingle
              @getPic="getBehind"
              :defaltPic="info.card_b"
              type="idcard"
              msg="背面"
            />
          </div>
        </div>
        <div class="description">
          找包装网将在12小时内完成您的实名认证审核，审核后您可使用发布需求、询价、购买、查看企业联系方式等功能。期间您可正常浏览、搜索。
        </div>
        <Row type="flex" justify="space-around">
          <Col :span="6">
            <div class="submit cursor" @click="handleConfirm">提交</div>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import {
  Form,
  FormItem,
  Input,
  Upload,
  Col,
  Row,
  RadioGroup,
  Radio,
  DatePicker,
  Select,
  Option
} from "element-ui";
import MUploadSingle from "@/components/common/m-upload/MuploadSingle.vue";
import { getUserInfo, updateUserInfo, autonymapi } from "@/request/api";

export default {
  name: "PersonalSettings",
  components: {
    Form,
    FormItem,
    Input,
    Upload,
    Col,
    Row,
    RadioGroup,
    Radio,
    DatePicker,
    Select,
    Option,
    MUploadSingle
  },
  data() {
    return {
      activeIndex: 0,
      info: {},
      basicInfoRules: {
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      },
      realnameVerify: {}
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    infoSub(formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$toastVant.loading("请稍后");
          updateUserInfo(this.info).then(() => {
            setTimeout(function() {
              _this.$toastVant.success("修改成功");
              _this.setUserInfo(_this.info);
            }, 500);
          });
        } else {
          _this.$toastVant.fail("请填写完整信息!");
          return false;
        }
      });
    },
    // 提交身份证信息
    handleConfirm() {
      const params = {
        card_a: this.info.card_a,
        card_b: this.info.card_b,
        real_type: this.info.real_type
      };
      autonymapi(params)
        .then(res => {
          this.$toastVant.success(res.message);
        })
        .catch(err => {
          this.$toastVant.fail(err.message);
        });
    },
    onChangeProvince(e) {
      this.info.province = e.value;
    },
    onChangeCity(e) {
      this.info.city = e.value;
    },
    onChangeArea(e) {
      this.info.area = e.value;
    },
    async getInfo() {
      await getUserInfo()
        .then(res => {
          this.info = res.data;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    getFront(url) {
      this.info.card_a = url;
    },
    getBehind(url) {
      this.info.card_b = url;
    },
    getAvatar(url) {
      this.info.avatar = url;
    },
    checkTab(index) {
      this.activeIndex = index;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
@import "~@/assets/style/cover.scss";

.personal-settings {
  .addressChoose {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  /deep/ .distpicker-address-wrapper label {
    display: block;
    width: 32%;
  }
  /deep/ .distpicker-address-wrapper select {
    width: 100%;
    background-color: #f3f4f8;
    border-radius: 10px;
    border-color: #e9e9e9;
  }
  .avatarPic {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    width: 148px;
    height: 148px;
  }
  .head {
    height: 60px;
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #666;

    img {
      margin-right: 6px;
      margin-top: 3px;
    }
  }

  .content {
    background-color: #fff;
    padding: 15px 20px;

    .tab-head {
      height: 50px;
      display: flex;
      align-items: center;
      color: #666;
      font-size: 16px;
      border-bottom: 1px solid #eee;

      .tab {
        padding: 0 15px;
        line-height: 50px;
        margin-right: 15px;
        border-bottom: solid 3px rgba(255, 255, 255, 0);
        cursor: pointer;
      }

      .tab-active {
        color: $theme-color-1;
        border-bottom: solid 3px $theme-color-1;
        box-sizing: border-box;
      }
    }

    .input-area {
      padding: 0 30px;

      /deep/ .el-form-item__label,
      /deep/ .el-form-item__content {
        font-size: 14px !important;
      }

      &.basic-info {
        .form-basic-info {
          margin-top: 20px;

          .close {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            color: #d1d1d1;
            border: 1px solid #d1d1d1;
            background: #fff;
          }
        }

        .submit {
          width: 200px;
          height: 40px;
          border-radius: 10px;
          background-color: $theme-color-1;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          margin-top: 30px;
          margin-bottom: 200px;
        }
      }

      &.realname-verify {
        font-size: 14px;
        color: #666;

        .prompt {
          color: $theme-color-1;
          margin: 20px 0;
        }

        /deep/ .el-radio__label {
          font-size: 14px;
        }

        .upload-area {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;

          .upload-front,
          .upload-reverse {
            width: 48%;
            position: relative;
          }
        }

        .description {
          margin-top: 30px;
          font-size: 14px;
          color: #969696;
          display: flex;
          justify-content: center;
        }

        .submit {
          width: 200px;
          height: 40px;
          border-radius: 10px;
          background-color: $theme-color-1;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          margin-top: 80px;
          margin-bottom: 200px;
        }
      }
    }
  }
}
</style>
